<template>
        <a-modal
                title="编辑菜单"
                width="800px"
                :maskClosable="false"
                :visible="visible"
                :confirm-loading="confirmLoading"
                @ok="handleOk"
                @cancel="handleCancel"
        >
                <a-spin :spinning="dataLoading" :delay="100">
                        <a-form :form="form" class="form">
                                <div class="select-root" ref="selectRoot"></div>
                                <a-row class="form-row">
                                        <a-col :xl="{span: 10}" :lg="{span: 12}" :md="{span: 12}" :sm="24">
                                                <a-form-item label="菜单名称">
                                                        <a-input
                                                                autocomplete="off"
                                                                v-decorator="['name', {rules: [{ required: true, message: '菜单名称不能为空', whitespace: true}]}]"
                                                                placeholder="请输入菜单名称"
                                                        />
                                                </a-form-item>
                                        </a-col>
                                        <a-col :xl="{span: 10, offset: 2}" :lg="{span: 12}" :md="{span: 12}" :sm="24">
                                                <a-form-item label="上级菜单">
                                                        <a-tree-select
                                                                :show-search="true"
                                                                style="width: 100%"
                                                                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                                                                :tree-data="dataSource"
                                                                :replace-fields="{children:'children', key:'menuId', value: 'menuId', title: 'name'}"
                                                                placeholder="顶级菜单"
                                                                :allow-clear="true"
                                                                tree-node-filter-prop="title"
                                                                tree-default-expand-all
                                                                v-decorator="['pid']"
                                                        >
                                                        </a-tree-select>
                                                </a-form-item>
                                        </a-col>
                                </a-row>
                                <a-row class="form-row">
                                        <a-col :xl="{span: 10}" :lg="{span: 12}" :md="{span: 12}" :sm="24">
                                                <a-form-item label="菜单路由">
                                                        <a-input
                                                                autocomplete="off"
                                                                v-decorator="['route']"
                                                                placeholder="请输入菜单路由"
                                                        />
                                                </a-form-item>
                                        </a-col>
                                        <a-col :xl="{span: 10, offset: 2}" :lg="{span: 12}" :md="{span: 12}" :sm="24">
                                                <a-form-item label="请求地址或页面路径">
                                                        <a-input
                                                                autocomplete="off"
                                                                v-decorator="['path']"
                                                                placeholder="请输入菜单路径"
                                                        />
                                                </a-form-item>
                                        </a-col>
                                </a-row>
                                <a-row class="form-row">
                                        <a-col :xl="{span: 10}" :lg="{span: 12}" :md="{span: 12}" :sm="24">
                                                <a-form-item label="菜单query参数">
                                                        <a-input
                                                                autocomplete="off"
                                                                placeholder='请输入菜单query参数 {}'
                                                                v-decorator="['urlParams', validateRules.urlParams]"
                                                        />
                                                </a-form-item>
                                        </a-col>
                                        <a-col :xl="{span: 10, offset: 2}" :lg="{span: 12}" :md="{span: 12}" :sm="24">
                                                <a-form-item label="菜单path参数">
                                                        <a-input
                                                                autocomplete="off "
                                                                placeholder="请输入菜单path参数  {}"
                                                                v-decorator="['pathParams', validateRules.pathParams]"
                                                        />
                                                </a-form-item>
                                        </a-col>
                                </a-row>
                                <a-row class="form-row">
                                        <a-col :xl="{span: 10}" :lg="{span: 12}" :md="{span: 12}" :sm="24">
                                                <a-form-item label="菜单图标">
                                                        <a-input
                                                                autocomplete="off"
                                                                v-decorator="['icon']"
                                                                placeholder="请输入菜单图标"
                                                        />
                                                </a-form-item>
                                        </a-col>
                                        <a-col :xl="{span: 10, offset: 2}" :lg="{span: 12}" :md="{span: 12}" :sm="24">
                                                <a-form-item label="权限辨别">
                                                        <a-input
                                                                autocomplete="off"
                                                                v-decorator="['powerDiscern', {rules: [{ required: true, message: '权限辨别不能为空', whitespace: true}]}]"
                                                                placeholder="请输入权限辨别"
                                                        />
                                                </a-form-item>
                                        </a-col>
                                </a-row>
                                <a-row class="form-row">
                                        <a-col :md="{span: 22}" :sm="24">
                                                <a-form-item label="关联菜单">
                                                        <a-tree-select
                                                                :show-search="true"
                                                                :multiple="true"
                                                                style="width: 100%"
                                                                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                                                                :tree-data="dataSource"
                                                                :replace-fields="{children:'children', key:'menuId', value: 'menuId', title: 'name'}"
                                                                placeholder="无关联"
                                                                :allow-clear="true"
                                                                tree-node-filter-prop="title"
                                                                tree-default-expand-all
                                                                :get-popup-container="() => $refs.selectRoot"
                                                                v-decorator="['reMenuId']"
                                                        >
                                                        </a-tree-select>
                                                </a-form-item>
                                        </a-col>
                                </a-row>
                                <a-row class="form-row">
                                        <a-col :xl="{span: 10}" :lg="{span: 12}" :md="{span: 12}" :sm="24">
                                                <a-form-item label="排序">
                                                        <a-input
                                                                autocomplete="autocomplete"
                                                                v-decorator="['sort']"
                                                                placeholder="请输入排序"
                                                        />
                                                </a-form-item>
                                        </a-col>
                                        <a-col :xl="{span: 10, offset: 2}" :lg="{span: 12}" :md="{span: 12}" :sm="24">
                                                <a-form-item label="类型">
                                                        <a-radio-group name="menuType" v-model="menuType"
                                                                       @change="handleRadio">
                                                                <a-radio :value="1">
                                                                        菜单
                                                                </a-radio>
                                                                <a-radio :value="2">
                                                                        按钮
                                                                </a-radio>
                                                        </a-radio-group>
                                                </a-form-item>
                                        </a-col>
                                </a-row>

                                <a-row class="form-row">
                                        <a-col :xl="{span: 10}" :lg="{span: 12}" :md="{span: 12}" :sm="24">
                                                <a-form-item label="打开方式">
                                                        <a-radio-group name="openType" v-model="openType"
                                                                       @change="handleRadio">
                                                                <a-radio :value="1">
                                                                        内部打开
                                                                </a-radio>
                                                                <a-radio :value="2">
                                                                        外部打开
                                                                </a-radio>
                                                        </a-radio-group>
                                                </a-form-item>
                                        </a-col>
                                        <a-col :xl="{span: 10, offset: 2}" :lg="{span: 12}" :md="{span: 12}" :sm="24">
                                                <a-form-item label="状态">
                                                        <a-switch data-name="status" checked-children="启用"
                                                                  un-checked-children="禁用"
                                                                  :checked="status === 1 ? true : false"
                                                                  @change="handleSwitch"/>
                                                </a-form-item>
                                        </a-col>
                                </a-row>
                                <a-row class="form-row">
                                        <a-col :sm="24">
                                                <a-form-item label="请求方式">
                                                        <a-radio-group name="method" v-model="method"
                                                                       @change="handleRadio">
                                                                <a-radio value="get">
                                                                        GET
                                                                </a-radio>
                                                                <a-radio value="post">
                                                                        POST
                                                                </a-radio>
                                                                <a-radio value="put">
                                                                        PUT
                                                                </a-radio>
                                                                <a-radio value="delete">
                                                                        DELETE
                                                                </a-radio>
                                                                <a-radio value="all">
                                                                        通配
                                                                </a-radio>
                                                        </a-radio-group>
                                                </a-form-item>
                                        </a-col>
                                </a-row>
                        </a-form>
                </a-spin>
        </a-modal>
</template>

<script>
        import {delObjEmptyVal, isJsonStr} from '../../../utils/util';
        import {MENU} from '@/services/api';
        import {request, METHOD} from '@/utils/request';

        export default {
                name: "SystemMenuEdit",
                props: {
                        dataSource: Array
                },
                data() {
                        return {
                                dataLoading: false,
                                visible: false,
                                confirmLoading: false,
                                form: this.$form.createForm(this),
                                status: 1,//状态
                                openType: 1,//打开方式
                                menuType: 1,//菜单类型
                                method: 'get',//请求方式
                                menuId: '',
                                validateRules: { // 自定义校验
                                        urlParams: {
                                                rules: [
                                                        {
                                                                validator: (rule, value, callback) => {
                                                                        if (value && isJsonStr(value) === false) {
                                                                                callback('参数不合法，请填写有效的json字符串');
                                                                        }
                                                                        callback()
                                                                }
                                                        }
                                                ]
                                        },
                                        pathParams: {
                                                rules: [
                                                        {
                                                                validator: (rule, value, callback) => {
                                                                        if (value && isJsonStr(value) === false) {
                                                                                callback('参数不合法，请填写有效的json字符串');
                                                                        }
                                                                        callback()
                                                                }
                                                        }
                                                ]
                                        }
                                }
                        }
                },
                methods: {
                        /**
                         * 处理显示
                         * @param menuId
                         */
                        handleVisible(menuId) {
                                const that = this;
                                that.menuId = menuId;
                                that.dataLoading = true;
                                that.visible = true;
                                that.loadData();
                        },
                        /**
                         * 处理隐藏
                         */
                        handleCancel() {
                                const that = this;
                                that.confirmLoading = false;
                                that.dataLoading = false;
                                that.visible = false;
                                that.resetForm();
                        },
                        /**
                         * 处理确定
                         */
                        handleOk(e) {
                                const that = this;
                                e.preventDefault();
                                if (that.dataLoading) {
                                        return false;
                                }
                                that.confirmLoading = true;
                                that.form.validateFields((err) => {
                                        if (err) {
                                                that.confirmLoading = false;
                                                return false;
                                        }
                                        that.handleSend();
                                });
                        },
                        /**
                         * 处理开关
                         * @param checked
                         * @param e
                         */
                        handleSwitch(checked, e) {
                                const that = this;
                                const name = e.currentTarget.dataset.name;
                                if (name === 'status') {
                                        that.status = checked ? 1 : 2;
                                }
                        },
                        /**
                         * 处理单选
                         * @param e
                         */
                        handleRadio(e) {
                                const that = this;
                                const name = e.target.name;
                                if (name === 'openType') {
                                        that.openType = e.target.value;
                                } else if (name === 'menuType') {
                                        that.menuType = e.target.value;
                                } else if (name === 'method') {
                                        that.method = e.target.value;
                                }
                        },
                        /**
                         * 加载数据
                         */
                        loadData() {
                                const that = this;
                                request(MENU + '/' + that.menuId, METHOD.GET, {}).then(function (result) {
                                        if (result.data.code !== 0) {
                                                that.dataLoading = false;
                                                that.$message.error(result.data.message, 3);
                                                return false;
                                        }
                                        that.form.setFieldsValue({
                                                pid: result.data.data.pid ? result.data.data.pid : undefined,
                                                reMenuId: result.data.data.reMenuId,
                                                name: result.data.data.name,
                                                icon: result.data.data.icon,
                                                route: result.data.data.route,
                                                path: result.data.data.path,
                                                urlParams: result.data.data.urlParams,
                                                pathParams: result.data.data.pathParams,
                                                sort: result.data.data.sort,
                                                powerDiscern: result.data.data.powerDiscern
                                        });
                                        that.status = result.data.data.status;
                                        that.openType = result.data.data.openType;
                                        that.menuType = result.data.data.menuType;
                                        that.method = result.data.data.method;
                                        that.dataLoading = false;
                                }).catch(function (error) {
                                        that.dataLoading = false;
                                        that.$message.error(error.response.data, 3);
                                });
                        },
                        /**
                         * 处理提交
                         */
                        handleSend() {
                                const that = this;
                                const sendData = delObjEmptyVal(that.form.getFieldsValue());
                                if (sendData.urlParams) {
                                        sendData.urlParams = JSON.parse(sendData.urlParams);
                                }
                                if (sendData.pathParams) {
                                        sendData.pathParams = JSON.parse(sendData.pathParams);
                                }
                                sendData.status = that.status;
                                sendData.openType = that.openType;
                                sendData.menuType = that.menuType;
                                sendData.method = that.method;
                                request(MENU + '/' + that.menuId, METHOD.PUT, sendData).then(function (result) {
                                        if (result.data.code !== 0) {
                                                that.confirmLoading = false;
                                                that.$message.error(result.data.message, 3);
                                                return false;
                                        }
                                        that.$message.success(result.data.message, 1);
                                        that.$parent.getList();
                                        setTimeout(function () {
                                                that.handleCancel();
                                        }, 1000);
                                }).catch(function (error) {
                                        that.confirmLoading = false;
                                        that.$message.error(error.response.data, 3);
                                });
                        },
                        /**
                         * 重置表单数据
                         */
                        resetForm() {
                                const that = this;
                                that.pid = undefined;//父id
                                that.status = 1;//状态
                                that.openType = 1;//打开方式
                                that.menuType = 1;//菜单类型
                                that.method = 'get';//请求方式
                                that.form.resetFields();
                        }
                }
        }
</script>

<style scoped lang="less">
        .form {
                .form-row {
                        margin: 0 -8px
                }

                .ant-col-md-12,
                .ant-col-sm-24,
                .ant-col-lg-6,
                .ant-col-lg-8,
                .ant-col-lg-10,
                .ant-col-xl-8,
                .ant-col-xl-6 {
                        padding: 0 8px
                }
        }
</style>